<template>
  <div class="main-container" ref="containerRef">
    <div class="base-container">
      <div class="left-w">
        <div class="card-wrap help-document">
          <div class="flex-c-c">
            <div>
              <h3>欢迎使用顾本ERP</h3>
              <a-button type="primary" size="small" @click="openUrl">帮助文档</a-button>
            </div>
            <a-image src="https://cdn2.selleroa.com/yfni/test/16970755197181e32be.png" />
          </div>
        </div>
        <div class="card-wrap equity-data">
          <Title title="权益数据" />
          <div class="contact-service">
            <i class="icon icon-lianxikefu-copy"></i>
            <span>联系客服增加权益</span>
          </div>
          <ul>
            <li style="width: 35%">
              <p class="title">订单(单/月)</p>
              <p class="val">1689/5000</p>
            </li>
            <li style="width: 35%">
              <p class="title">可授权店铺</p>
              <p class="val">90/100</p>
            </li>
            <li style="width: 30%">
              <p class="title">子账号数</p>
              <p class="val">50/100</p>
            </li>
            <li style="width: 35%">
              <p class="title">设计服务金余额</p>
              <p class="val">345.00</p>
              <p class="tip">总花费:¥500.00</p>
            </li>
            <li style="width: 50%">
              <p class="title">ChatGPT会话剩余点数</p>
              <p class="val">5689</p>
              <p class="tip">已用量:10000</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="card-wrap backlog">
        <Title title="待办事项" />
        <div class="show-all">
          <span>全部记录</span>
          <icon-right />
        </div>
        <a-empty description="正在开发中..." />
      </div>
      <div class="center-w2">
        <MyAwaitWork />
        <!-- <div class="card-wrap common-problem">
          <Title title="常见问题" />
          <div class="show-all">
            <span>查看更多</span>
            <icon-right />
          </div>
          <ul>
            <li v-for="(item, i) in problemList" :key="i" class="link-item">
              <TextLimit :rows="1">{{ item }}</TextLimit>
            </li>
          </ul>
        </div> -->
        <div class="card-wrap notice">
          <notice />
          <!-- <Title title="更新公告">
            <template #small>
              <span class="title-small">更新日期：2023-08-07</span>
            </template>
          </Title>
          <div class="show-all">
            <span>查看更多</span>
            <icon-right />
          </div>
          <ul>
            <li v-for="(item, i) in noticeList" :key="i" class="link-item cursor">
              <TextLimit :rows="1">{{ item }}</TextLimit>
            </li>
          </ul> -->
        </div>
      </div>
      <!-- 快捷入口 -->
      <QuickEntry />
    </div>
    <a-affix :offsetTop="0" :target="containerRef">
      <div style="padding: 10px 0px; background-color: #f0f2f5">
        <a-tabs v-model:active-key="activeTab">
          <a-tab-pane key="1" title="经销商看板" />
          <a-tab-pane key="2" title="排行榜" />
          <a-tab-pane key="3" title="供应商看板" />
          <a-tab-pane key="4" title="设计师看板" />
        </a-tabs>
      </div>
    </a-affix>
    <!-- 经销商工作台 -->
    <template v-if="activeTab == 1">
      <!-- 广告销售&广告表现 -->
      <DealerHomeBoard />
      <a-row style="margin-top: 10px" :gutter="10">
        <a-col :span="12">
          <!-- 库存统计 -->
          <InventoryChart />
        </a-col>
        <a-col :span="12">
          <!-- 库存出入库统计 -->
          <HandleInventoryChart />
        </a-col>
      </a-row>
      <a-row style="margin-top: 10px" :gutter="10">
        <a-col :span="12">
          <!-- 产品统计 -->
          <ProductChart />
        </a-col>
        <a-col :span="12">
          <!-- 采购统计 -->
          <PurchaseChart />
        </a-col>
      </a-row>
    </template>
    <!-- 排行榜 -->
    <template v-if="activeTab == 2">
      <div class="search-w">
        <a-form :model="searchInfo" layout="inline" size="small">
          <a-form-item field="value1" hideLabel>
            <a-select v-model="searchInfo.value1" placeholder="站点" allow-clear style="width: 100px">
              <a-option value="US">US</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="value1" hideLabel>
            <a-select v-model="searchInfo.value2" placeholder="选择店铺" allow-clear style="width: 160px">
              <a-option value="US">店铺1</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="value3" hideLabel>
            <a-select v-model="searchInfo.value3" placeholder="币种" allow-clear style="width: 80px">
              <a-option value="USD">USD</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="value5" hideLabel>
            <a-radio-group v-model="searchInfo.value5" type="button" size="small">
              <a-radio value="1">近7日TOP</a-radio>
              <a-radio value="2">近30日TOP</a-radio>
              <a-radio value="3">近90日TOP</a-radio>
              <a-radio value="4">本年度TOP</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
      </div>
      <a-row style="margin-top: 10px" :gutter="10">
        <a-col :span="12">
          <!-- 畅销排行榜 -->
          <SalesRankingList />
        </a-col>
        <a-col :span="12">
          <!-- 广告排行榜 -->
          <AdvertRankingList />
        </a-col>
      </a-row>
    </template>
    <!-- 供应商工作台 -->
    <template v-if="activeTab == 3">
      <!-- 采购订单履约表现 -->
      <SupPurchaseChart />
      <a-row style="margin-top: 10px" :gutter="10">
        <a-col :span="12">
          <!-- 库存统计 -->
          <InventoryChart />
        </a-col>
        <a-col :span="12">
          <!-- 库存出入库统计 -->
          <HandleInventoryChart />
        </a-col>
      </a-row>
    </template>
    <!-- 设计师工作台 -->
    <template v-if="activeTab == 4">
      <!-- 广告销售&广告表现 -->
      <AdvertSales />
      <a-row style="margin-top: 10px" :gutter="10">
        <a-col :span="12">
          <!-- 库存统计 -->
          <InventoryChart />
        </a-col>
        <a-col :span="12">
          <!-- 库存出入库统计 -->
          <HandleInventoryChart />
        </a-col>
      </a-row>
      <a-row style="margin-top: 10px" :gutter="10">
        <a-col :span="12">
          <!-- 产品统计 -->
          <ProductChart />
        </a-col>
        <a-col :span="12">
          <!-- 采购统计 -->
          <PurchaseChart />
        </a-col>
      </a-row>
    </template>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'Home',
  })
</script>
<script lang="ts" setup>
  import { computed, ref, unref, watch } from 'vue'

  import Title from './components/Title.vue'
  import QuickEntry from './components/QuickEntry.vue'
  import MyAwaitWork from './components/MyAwaitWork.vue'
  import AdvertSales from './components/AdvertSales.vue'
  import SupPurchaseChart from './components/SupPurchaseChart.vue'
  import InventoryChart from './components/InventoryChart.vue'
  import HandleInventoryChart from './components/HandleInventoryChart.vue'
  import ProductChart from './components/ProductChart.vue'
  import PurchaseChart from './components/PurchaseChart.vue'
  import SalesRankingList from './components/SalesRankingList.vue'
  import AdvertRankingList from './components/AdvertRankingList.vue'
  import useAppConfigStore from '@/store/modules/app-config'
  import DealerHomeBoard from '@/views/dataBoard/dealer/dealerHomeBoard.vue'
  import notice from './components/notice.vue'
  const searchInfo = ref<any>({
    value5: '1',
  })

  const appStore = useAppConfigStore()
  const problemList = ['亚马逊店铺如何授权', '如何导入1688产品', '亚马逊订单处理', '如何购买美工服务']
  const activeTab = ref(1)
  const enrollmentChannelsChart = ref()
  const weekSalesChart = ref()
  const hotProductChart = ref()
  const fullYearSalesChart = ref()
  const orderChart = ref()
  const containerRef = ref()
  const collapse = computed(() => {
    return appStore.isCollapse
  })

  function onResize() {
    setTimeout(() => {
      unref(enrollmentChannelsChart).updateChart()
      unref(weekSalesChart).updateChart()
      unref(hotProductChart).updateChart()
      unref(fullYearSalesChart).updateChart()
      unref(orderChart).updateChart()
    }, 500)
  }
  function openUrl() {
    window.open('https://help-doc.selleroa.com/web/#/5/23', '_block')
  }
  watch(collapse, () => {
    onResize()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-card) {
    border-radius: 5px;
    border: none;
    box-shadow: 0px 8px 8px 0px rgba(162, 173, 200, 0.15);
  }
  :deep(.arco-card-body) {
    padding: 0;
    height: 100%;
  }
  .main-container {
    height: 100%;
    overflow-y: auto;
    padding: 10px 5px;
    :deep(.card-wrap) {
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      position: relative;
      background: var(--color-bg-2);
      transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
      box-shadow: 0px 8px 8px 0px rgba(162, 173, 200, 0.15);
      padding: 10px;
    }
    :deep(.show-all) {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 12px;
      color: #999;
      cursor: pointer;
      &:hover {
        color: rgb(var(--primary-6));
      }
    }
    .base-container {
      display: flex;
      .left-w {
        width: 360px;
        display: flex;
        flex-direction: column;
      }
      .help-document {
        margin-bottom: 10px;
        h3 {
          font-weight: bold;
          font-size: 20px;
          margin-bottom: 20px;
        }
        .arco-btn {
          width: 120px;
        }
        .arco-image {
          margin-left: 20px;
          width: 150px;
        }
      }
      .equity-data {
        flex: 1;
        .contact-service {
          position: absolute;
          top: 10px;
          right: 5px;
          font-size: 12px;
          line-height: 1;
          padding: 4px 8px;
          color: rgb(93, 74, 44);
          background: linear-gradient(70deg, rgb(235, 208, 160), rgb(241, 227, 194));
          transform: scale(0.9);
          .icon {
            font-size: 12px;
            margin-right: 2px;
          }
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20px;
          padding-left: 10px;
          li {
            margin-bottom: 30px;
            .title {
              font-size: 12px;
              color: #999;
            }
            .val {
              font-weight: bold;
            }
            .tip {
              font-size: 12px;
              color: rgb(var(--primary-4));
            }
          }
        }
      }
      .backlog {
        margin-left: 10px;
        flex: 1;
        margin-right: 10px;
        :deep(.arco-empty-image) {
          font-size: 80px;
          margin-top: 60px;
        }
      }
      .center-w2 {
        flex: 1;
        margin-right: 10px;
        .card-wrap {
          height: 200px;
        }
        ul {
          margin-top: 10px;
          overflow-y: auto;
        }
        li {
          padding: 8px 10px;
          font-size: 12px;
          &:hover {
            background-color: rgb(var(--primary-1));
          }
        }
      }
    }
    .arco-tabs {
      background-color: #fff;
      :deep(.arco-tabs-nav::before) {
        display: none;
      }
    }
    .search-w {
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
      .arco-form-item {
        margin-bottom: 0;
        margin-right: 10px;
      }
      .other-time {
        font-size: 12px;
        color: #999;
        margin-right: 10px;
      }
      :deep(.arco-radio-group-button) {
        padding: 0;
        .arco-radio-button {
          margin: 0;
          background-color: #fff;
          line-height: 26px;
          border: 1px solid var(--color-border);
          font-size: 12px;
          &:first-child {
            border-radius: 5px 0 0 5px;
          }
          &:last-child {
            border-radius: 0 5px 5px 0;
          }
        }
        .arco-radio-checked {
          border-color: rgb(var(--primary-6));
        }
      }
    }
    .title-small {
      margin-left: 10px;
      font-size: 12px;
      color: #999;
    }
  }
</style>
<style scoped>
  @media screen and (max-width: 1500px) {
    .base-container .left-w {
      width: 300px !important;
    }
    .base-container h3 {
      font-size: 16px !important;
    }
    .base-container .arco-btn {
      width: 80px !important;
    }
    .base-container .arco-image {
      width: 120px !important;
    }
  }
</style>
